<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">	

<title>3D人物旋转</title>

<style>
	canvas { width: 100%; height: 100% }
	* {
		margin: 0;
		padding: 0;
	}

	body{ 
		border: none; 
		overflow: hidden; 
		margin: 0px;
		position: relative;
	}
	.clickwindow {
		width: 260px;
		height: 160px;
		z-index: 9999;
		background-image: url('./textures/clickwindow.png');
		background-position: 100% 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		color: #62b7ff;
		padding: 40px 20px 20px 30px;
        pointer-events: none 
		
	}
	.windowtext li {
		list-style: none;
		line-height: 32px;
		font-size: 18px;
	}
</style>

</head>

<body>
<div id="container"></div>
<div class="clickwindow" id="click_window">
	<ul class="windowtext" id="ciliktext">
	</ul>
</div>
<div class="clickwindow" id="left_click_window">
	<ul class="windowtext" id="left_ciliktext">
		<li>姓名:李一峰</li>
		<li>身高:175CM</li>
		<li>体重:65KG</li>
		<li>年龄:25岁</li>
	</ul>
</div>
<button id="click_button">这是测试按钮</button>

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/EffectComposer.js"></script>
<script src="js/RenderPass.js"></script>
<script src="js/LuminosityHighPassShader.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/ShaderPass.js"></script>
<script src="js/UnrealBloomPass.js"></script>


<!-- 这是threejs部分 -->
<script>

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, {passive: false});	

var clickbutton = document.getElementById('click_button')

	
var	container = document.createElement( 'div' );
	document.body.appendChild( container );

var mixer, yrotate ;
var manshow = false // 控制显示的人物是男或者女

clickbutton.addEventListener('click', function(){
	manshow = !manshow
	console.log('执行了', manshow)
})

var	renderer = new THREE.WebGLRenderer( { antialias: true, alpha:true } );  // render 添加了抗锯齿,支持alpha
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );  //设置窗口
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.setClearColor(0x000000, 1)   //设置场景背景色

container.appendChild( renderer.domElement ); 


var	scene = new THREE.Scene();
var	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set(0,140,-200); // 设置相机位置(x, y z) y控制高度,z控制当前的距离
	camera.lookAt(scene.position) // 设置相机方向(指向的场景对象)

/**
 * 光源设置
 */
// 添加点光源
var light = new THREE.PointLight( 0xe38210, 1);  
	light.position.set( 0, 50, 0 );
	light.name = "点光源"
	scene.add( light );
// 环境光
var ambient = new THREE.AmbientLight(0xffffff,0.6);
	scene.add(ambient);

// const pointLight = new THREE.PointLight( 0xffffff, 1 );
// camera.add( pointLight );

// 加载后期发光效果
var renderScene = new THREE.RenderPass( scene, camera );

var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
	bloomPass.threshold = 0.08; // 发光阈值
	bloomPass.strength = 1.6;  // 发光强度
	bloomPass.radius = 0;  // 发光半径
    renderer.toneMappingExposure = 1.2;  //设置场景曝光度

composer = new THREE.EffectComposer( renderer );
composer.addPass( renderScene );
composer.addPass( bloomPass );


// 加载背景材质
const texture = new THREE.TextureLoader();
const bgtexture = texture.load( "./textures/bg5.jpg" );  //加载背景图片

const modeltexture = texture.load( "./textures/test04.png" ); // 加载贴图
modeltexture.offset.set(0.5, 0.5)
modeltexture.wrapS = THREE.RepeatWrapping
modeltexture.wrapT = THREE.RepeatWrapping
modeltexture.repeat.set(1, 1)
// modeltexture.rotation = Math.PI / 2
scene.background = bgtexture  // 设置背景图片


var controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.enableDamping = true; //惯性
	controls.dampingFactor = 0.1; //惯性系数
	controls.enablePan = false // 禁止左右平移
    controls.enableZoom = false // 禁止缩放
	controls.maxPolarAngle = Math.PI / 2 // 上下旋转的最小角度控制
	controls.minPolarAngle = Math.PI / 2 // 上下旋转的最大角度控制


window.addEventListener( 'resize', onWindowResize, false ); // 添加屏幕修改事件
function onWindowResize( event ) {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
    composer.setSize( window.innerWidth, window.innerHeight );
}
var boxMesh

var modelmaterial = new THREE.MeshLambertMaterial({
                        color: 0x1D69D8,
                        transparent: true,//允许透明计算
                        opacity: 0.9,//半透明设置
                        map: modeltexture,
                    });

function clickwindow() {
      /**
       * 立方体世界坐标转屏幕坐标
       */
      //创建一个三维向量作为世界坐标
      var worldVector = new THREE.Vector3();
      //获取网格模型boxMesh的世界坐标，赋值给worldVector
      boxMesh.getWorldPosition(worldVector);
      //世界坐标转标准设备坐标，standardVector是WebGL设备坐标
      var standardVector = worldVector.project(camera);
      // 根据WebGL标准设备坐标standardVector计算div标签在浏览器页面的坐标
      var a = window.innerWidth / 2;
      var b = window.innerHeight / 2;
      var x = Math.round(standardVector.x * a + a); //标准设备坐标转屏幕坐标
      var y = Math.round(-standardVector.y * b + b); //标准设备坐标转屏幕坐标

      // 获得HTML元素创建的UI界面
      var popwindow = document.getElementById('click_window');
      /**
       * 设置右侧标签元素的位置
       */
      popwindow.style.left = x + 300 + 'px';
      //这里的130px主要是为了标签和模型有一定偏移，当然也可以不设置，两者叠加在一起
      popwindow.style.top = y - 150 + 'px';

      // 获得HTML元素创建的UI界面
      var leftpopwindow = document.getElementById('left_click_window');
      /**
       * 设置左侧标签元素的位置
       */
      leftpopwindow.style.left = x - 600 + 'px';
      //这里的130px主要是为了标签和模型有一定偏移，当然也可以不设置，两者叠加在一起
      leftpopwindow.style.top = y - 190 + 'px';
    }

var GLTFLoader = new THREE.GLTFLoader();
var thismodel,mains = [];
	GLTFLoader.load( "models/people.glb", function ( gltf ) {
        thismodel = gltf.scene;
        thismodel.name = "gltfmodel";
        thismodel.scale.set(0.5,0.5,0.5);
		thismodel.traverse( function ( child ) {
			if (child.isMesh && (child.name == "男"|| child.name == "女") ) {
					boxMesh = child
                    clickwindow()
					child.material = modelmaterial
					var edges = new THREE.EdgesGeometry(child.geometry,0);
                    var edgesMaterial = new THREE.LineBasicMaterial({
                        color: 0x1D69D8,
                    });
                    var line = new THREE.LineSegments(edges, edgesMaterial);
                    child.add(line);
				
                } 
		});
		scene.add( thismodel );
        render();
	});

function render() {
    clickwindow()
    modelmaterial.map.offset.y += 0.002;
	scene.traverse((child)=>{
		switch (child.name) {
			case "底部小圆":
			child.rotateY(0.005);
			break;
			case "男":
			case "女":
			child.rotateY(0.005);
			break;
			case "中心圆":
			case "顶中间环":
			child.rotateY(-0.002);
			break;
			case "外部大环":
			case "顶大环":
			child.rotateY(-0.005);
			break;
			case "外部中环":
			child.rotateY(0.002);
			break;
            case "点光源":
			child.rotateY(0.002);
			break;
            default:
                // console.log('结束')
		}
	})
	requestAnimationFrame( render );
	controls.update();	
	renderer.clear();	
    renderer.render( scene, camera );
    composer.render();
    if (manshow) {
		scene.getObjectByName ( "男" ).visible = true
		scene.getObjectByName ( "女" ).visible = false
        const yquater = scene.getObjectByName ( "男" ).quaternion;
		
        var yrotate_h = yrotate;
        yrotate = camera.quaternion.angleTo(yquater)*180/Math.PI;
        if( 135 < yrotate &&  yrotate <= 180) {  //向前
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向前</li><li>性别:男</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        } else if (0 <= yrotate &&  yrotate <= 45) { //向后
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向后</li><li>性别:男</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        } else if(45 < yrotate &&  yrotate <= 135 && yrotate > yrotate_h) { //向左
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向左</li><li>性别:男</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        } else if (45 < yrotate &&  yrotate <= 135 && yrotate < yrotate_h) { //向右
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向右</li><li>性别:男</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        }
    } else {
		scene.getObjectByName ( "女" ).visible = true
		scene.getObjectByName ( "男" ).visible =false
        const yquater = scene.getObjectByName ( "女" ).quaternion;
		
        var yrotate_h = yrotate;
        yrotate = camera.quaternion.angleTo(yquater)*180/Math.PI;
        if( 135 < yrotate &&  yrotate <= 180) {  //向前
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向前</li><li>性别:女</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        } else if (0 <= yrotate &&  yrotate <= 45) { //向后
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向后</li><li>性别:女</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        } else if(45 < yrotate &&  yrotate <= 135 && yrotate > yrotate_h) { //向左
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向左</li><li>性别:女</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        } else if (45 < yrotate &&  yrotate <= 135 && yrotate < yrotate_h) { //向右
            document.getElementById("ciliktext").innerHTML = "<li>朝向:向右</li><li>性别:女</li><li>身高:165CM</li><li>体重:52KG</li><li>年龄:23岁</li>";
        }
    }
}

</script>

	
</body>
</html>